<template>
    <view class="login-container">
      <!-- 顶部导航 -->
      <view class="top">
        <text class="icon-close" @tap="goBack">×</text>
      </view>
      
      <!-- 主体内容 -->
      <view class="login-main">
        <!-- Logo部分 -->
        <view class="login-header">
          <text class="icon icon-film-logo"></text>
          <text class="title">光影时代</text>
          <text class="eng-title">Cine Glow</text>
        </view>
        
        <!-- 登录部分 -->
        <view class="login-content">
          <!-- 登录类型切换 -->
          <view class="login-type">
            <text :class="{active: loginType}" @tap="changeLoginType">验证码登录</text>
            <text :class="{active: !loginType}" @tap="changeLoginType">密码登录</text>
          </view>
          
          <!-- 登录表单 -->
          <view class="login-form">
            <!-- 手机验证码登录 -->
            <view v-if="loginType" class="login-phone">
              <view class="login-info">
                <input type="number" placeholder="手机号" v-model="phone" />
                <button v-if="countDown === 0" 
                        :class="{phone_right: checkPhone}"
                        @tap="getValidateCode">获取验证码</button>
                <button v-else class="phone_right">重新获取({{countDown}}s)</button>
              </view>
              <view class="login-info">
                <input type="number" placeholder="验证码" v-model="phoneCode" />
              </view>
              <view class="login-info login-hint">
                <text>温馨提示：未注册的手机号，验证后将自动注册账户，且代表已同意</text>
                <text class="link" @tap="showAgreement">《服务协议与隐私政策》</text>
              </view>
            </view>
            
            <!-- 密码登录 -->
            <view v-else class="login-password">
              <view class="login-info">
                <input type="text" placeholder="用户名" v-model="username" />
              </view>
              <view class="login-info">
                <input type="password" placeholder="密码" v-model="password" />
              </view>
            </view>
            
            <!-- 登录按钮 -->
            <button class="login-btn" @tap="login">登录</button>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        phone: '', // 手机号
        phoneCode: '', // 验证码
        username: '', // 用户名
        password: '', // 密码
        loginType: true, // true为手机验证码登录，false为密码登录
        countDown: 0, // 验证码倒计时
      }
    },
    computed: {
      // 检查手机号格式
      checkPhone() {
        return /^1[3|4|5|6|7|8][0-9]{9}$/.test(this.phone)
      }
    },
    methods: {
      // 返回上一页
      goBack() {
        uni.navigateBack()
      },
      
      // 切换登录方式
      changeLoginType() {
        this.loginType = !this.loginType
      },
      
      // 获取验证码
      getValidateCode() {
        if (this.checkPhone) {
          this.countDown = 60
          const timer = setInterval(() => {
            this.countDown--
            if (this.countDown === 0) {
              clearInterval(timer)
            }
          }, 1000)
          
          uni.request({
            url: 'http://localhost:9090/getPhoneCode',
            method: 'GET',
            success: (res) => {
              if (res.data.code === 1) {
                uni.showToast({
                  title: '验证码为：' + res.data.phoneCode,
                  icon: 'none'
                })
              } else {
                uni.showToast({
                  title: '获取手机验证码失败',
                  icon: 'none'
                })
                clearInterval(timer)
                this.countDown = 0
              }
            },
            fail: (err) => {
              console.log(err)
              uni.showToast({
                title: '网络请求失败',
                icon: 'none'
              })
            }
          })
        }
      },
      
      // 登录方法
      login() {
        if (this.loginType) {
          // 手机验证码登录
          if (this.phone === '') {
            uni.showToast({
              title: '请输入手机号',
              icon: 'none'
            })
          } else if (!this.checkPhone) {
            uni.showToast({
              title: '请输入正确的手机号',
              icon: 'none'
            })
          } else if (this.phoneCode === '') {
            uni.showToast({
              title: '请输入验证码',
              icon: 'none'
            })
          } else {
            uni.request({
              url: 'http://localhost:9090/phoneLogin',
              method: 'POST',
              data: {
                phone: this.phone,
                phoneCode: this.phoneCode
              },
              success: (res) => {
                if (res.data.code === 1) {
            // 保存用户ID
            uni.setStorageSync('UID', res.data.userId)
            
            // 显示登录成功提示
            uni.showToast({
              title: '登录成功',
              icon: 'success',
              duration: 1500
            })
            
            // 返回上一页面
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none'
            })
          }
              },
              fail: (err) => {
                console.log(err)
                uni.showToast({
                  title: '网络请求失败',
                  icon: 'none'
                })
              }
            })
          }
        } else {
          // 密码登录
          if (this.username === '') {
            uni.showToast({
              title: '用户名不能为空',
              icon: 'none'
            })
          } else if (this.password === '') {
            uni.showToast({
              title: '密码不能为空',
              icon: 'none'
            })
          } else {
            uni.request({
              url: 'http://localhost:9090/passwordLogin',
              method: 'POST',
              data: {
                username: this.username,
                password: this.password
              },
              success: (res) => {
                if (res.data.code === 1) {
    uni.setStorageSync('UID', res.data.userId)
    
    // 显示登录成功提示
    uni.showToast({
      title: '登录成功',
      icon: 'success',
      duration: 1500
    })
    
    // 延迟一下再跳转，让用户看到登录成功的提示
    setTimeout(() => {
      // 跳转到用户页面，使用 switchTab 而不是 navigateBack
      uni.switchTab({
        url: '/pages/user/user'
      })
    }, 1500)
  } else {
    uni.showToast({
      title: res.data.msg,
      icon: 'none'
    })
  }
              },
              fail: (err) => {
                console.log(err)
                uni.showToast({
                  title: '网络请求失败',
                  icon: 'none'
                })
              }
            })
          }
        }
      },
      
      // 显示协议
      showAgreement() {
        // 这里可以跳转到协议页面或显示协议弹窗
        uni.showToast({
          title: '暂未开放',
          icon: 'none'
        })
      }
    }
  }
  </script>
  
  <style>
  .login-container {
    width: 100%;
    height: 100vh;
    color: #000;
    font-size: 36rpx;
  }
  
  .top {
    width: 100%;
    height: 128rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    color: #dd2727;
  }
  
  .icon-close {
    font-size: 64rpx;
    position: absolute;
    left: 32rpx;
  }
  
  .login-main {
    margin-top: 128rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .login-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 38rpx;
  }
  
  .icon {
    font-size: 192rpx;
  }
  
  .title, .eng-title {
    font-size: 42rpx;
    font-weight: bold;
    text-align: center;
    color: #dd2727;
  }
  
  .title {
    letter-spacing: 14rpx;
    margin-bottom: 11rpx;
  }
  
  .eng-title {
    letter-spacing: 1rpx;
    font-size: 35rpx;
  }
  
  .login-content {
    width: 100%;
    background-color: #fff;
  }
  
  .login-type {
    width: 100%;
    font-size: 36rpx;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 36rpx;
  }
  
  .login-type text {
    margin: 40rpx;
    padding-bottom: 20rpx;
    box-sizing: border-box;
  }
  
  .active {
    color: #dd2727;
    border-bottom: 9rpx solid #dd2727;
  }
  
  .login-form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .login-phone, .login-password {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
  }
  
  .login-info {
    position: relative;
    margin-bottom: 36rpx;
    width: 70%;
  }
  
  .login-info input {
    width: 100%;
    height: 80rpx;
    padding-left: 17rpx;
    box-sizing: border-box;
    border: 2rpx solid #888;
    border-radius: 28rpx;
  }
  
  .login-info input:focus {
    border: 2rpx solid #dd2727;
  }
  
  .login-info button {
    position: absolute;
    top: 50%;
    right: 6rpx;
    height: 80%;
    transform: translateY(-50%);
    border: 0;
    color: #ccc;
    font-size: 24rpx;
    background: transparent;
  }
  
  .phone_right {
    color: #e02e24 !important;
  }
  
  .login-hint {
    color: #888;
    font-size: 24rpx;
    line-height: 40rpx;
  }
  
  .link {
    color: #dd2727;
  }
  
  .login-btn {
    width: 70%;
    height: 96rpx;
    margin: 40rpx auto;
    background-color: #dd2727;
    color: #fff;
    border-radius: 96rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>